<template>
  <div class="cont">
    <div class="home">
      <div class="top">
        <div class="swiperCon">
          <span class="logos">
            <img class="img-logo1" src="../assets/logo1.png" alt="">
            <img class="img-logo2" src="../assets/logo2.png" alt="">
            <!-- <div></div> -->
            <!-- <div></div> -->
          </span>
          <Swiper :bannerlist="bannerlist"></Swiper>
        </div>
      </div>

      <div class="content">
        <div class="cont-div">
          <div class="cont-left">
            <div class="news-cont">
              <div class="title">新闻</div>
              <div class="news-item" v-for="item in newslist" :key="item.id" @click="newsClick(item)">
                <p class="title-text">{{item.newsTitle}}</p>
                <p class="time-text">{{item.createTime | timeFormat("YYYY-MM-DD ")}}</p>
              </div>
              <button class="check-more" @click="toNewsList">查看更多<img src="../assets/arrow.png" class="arrow-right" alt=""></button>
            </div>
            <div class="train-active">
              <p class="train-text">培训活动</p>
              <div class="train-cont">
                <div class="train-item" v-for="(item,index) in trainlist" :key="index" @click="trainClick(item)">
                  <img :src="item.pictureUrl" class="train-img" alt="">
                  <p class="text-detail">{{item.trainTitle}}</p>
                  <img src="../assets/arrow-right.png" class="train-arrow" alt="">
                </div>
              </div>
            </div>
          </div>
          <div class="cont-right">
            <div class="title">公告</div>
            <div class="board-item" v-for="item in boradlist" :key="item.id" @click="boardClick(item)">
              <p class="title-board">{{item.newsTitle}}</p>
              <p class="board-text">{{item.createTime | timeFormat("YYYY-MM-DD ")}}</p>
            </div>
            <button class="check-more" @click="toBoardList">查看更多<img src="../assets/arrow.png" class="arrow-right" alt=""></button>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
  import Swiper from "../components/swiper.vue"
  import request from "../utils/request.js"
  import {
    getNewsByCategoryId,
    selectNewsCategorys,
  } from "@/api/home"
  export default {
    components: {
      Swiper
    },
    data() {
      return {
        titlelist: [],
        newslist: [],
        boradlist: [],
        newsId: 0,
        boradId: 0,
        // swiperList: [...new Array(5)],
        // swiperIndex: 0,
        baseUrl:"http://59.173.18.239:2051/group1/M00/00/00/",
        trainlist: [{
            pictureUrl: "wKiJXF-QN8OEbp4-AAAAAAAAAAA563.png",
            trainTitle: "岗前培训"
          },
          {
            pictureUrl: "wKiJXF-QN7KEV7S6AAAAAAAAAAA403.png",
            trainTitle: "初任教师导师制"
          },
          {
            pictureUrl: "wKiJXF-QN7iEEZ4TAAAAAAAAAAA989.png",
            trainTitle: "在职培训"
          },
          {
            pictureUrl: "wKiJXF-QN72EHpjXAAAAAAAAAAA960.png",
            trainTitle: "离岗进修与实践"
          }
        ],
        bannerlist: [],
      }
    },
    created() {
      this.trainlist.forEach(item=>{
        item.pictureUrl=this.baseUrl+item.pictureUrl
      })
      this.selectNewsCategorys();
      setTimeout(() => {
        this.getNewsByCategoryId();
      }, 500)
    },
    watch: {
      "$route": {
        handler(newV) {
          this.$forceUpdate();
          if (newV) {
            this.selectNewsCategorys();
            setTimeout(() => {
              this.getNewsByCategoryId();
            }, 500)
          }
        },
        immediate: true,
        deep: true
      }
    },
    methods: {
      selectNewsCategorys() {
        selectNewsCategorys({}).then(res => {
          this.titlelist = res.result;
          res.result.forEach(item => {
            if (item.newsCategoryName === "新闻") {
              this.newsId = item.id;
            } else if (item.newsCategoryName === "公告") {
              this.boradId = item.id;
            }
          })
        })
      },
      getNewsByCategoryId() {
        getNewsByCategoryId({
          newCategoryId: this.newsId,
          pageNum: 1,
          pageSize: 6
        }).then(res => {
          this.newslist = res.result.list;
        })

        getNewsByCategoryId({
          newCategoryId: this.boradId,
          pageNum: 1,
          pageSize: 6
        }).then(res => {
          console.log(res);
          res.result.list.forEach(item => {
            if (item.newsTitle.length > 35) {
              item.newsTitle = item.newsTitle.slice(0, 30) + "..."
            }
          })
          this.boradlist = res.result.list;
        })

        getNewsByCategoryId({
          pageNum: 1,
          pageSize: 5
        }).then(res => {
          this.bannerlist = res.result.list;
        })
      },
      newsClick(item) {
        this.$router.push({
          path: '/newsdetail',
          name: 'newsdetail',
          query: {
            id: item.id
          }
        })
      },
      boardClick(item) {
        this.$router.push({
          path: '/boarddetail',
          name: 'boarddetail',
          query: {
            id: item.id
          }
        })
      },
      trainClick(item) {
        item.trainTitle = item.trainTitle.trim()
        this.$router.push({
          path: '/pretraining',
          name: 'pretraining',
          query: {
            title: item.trainTitle
          }
        })
      },
      toNewsList() {
        this.$router.push({
          path: '/newslist',
          name: 'newslist'
        })
      },
      toBoardList() {
        this.$router.push({
          path: '/boardlist',
          name: 'boardlist'
        })
      }
    }
  }
</script>

<style scoped="scoped">
  .cont {
    width: 100%;
  }

  .home {
    width: 100%;
    /* padding: 38px 200px; */
    box-sizing: border-box;
    /* background-color: #106470; */
    /* height: 534px; */
    /* padding: 38px; */
  }

  .top {
    width: 100%;
    height: 534px;
    background-color: #106470;
    padding-top: 45px;
    box-sizing: border-box;
    margin-bottom: 50px;
  }

  .swiperCon {
    background-color: #106470;
    /* width: 100%;
    width: 100%; */
    width: 1200px;
    height: 534px;
    /* padding: 38px 200px; */
    margin: 0 auto;
  }

  .logos {
    display: flex;
    align-items: center;
    margin-bottom: 38px;
  }

 /* .logos>div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
  } */

  .img-logo1{
    /* background-image: url(../assets/logo1.png); */
    width: 310px;
    height: 72px;
    margin-right: 25px;
  }

  .img-logo2 {
    width: 180px;
    height: 62px;
    /* background-image: url(../assets/logo2.png); */
  }

  .swiperCon>>>.el-carousel__arrow {
    display: none;
  }

  .content {
    /* width: 100%; */
    /* padding: 0 200px; */
    /* box-sizing: border-box; */
    margin-top: 30px;
    width: 1200px;
    margin: 0 auto;
  }

  .cont-div {
    display: flex;
  }

  .news-cont {
    width: 808px;
    height: 388px;
    background: #F9F9F9;
    opacity: 1;
    padding: 0 20px;
    box-sizing: border-box;
  }

  .news-item {
    display: flex;
    justify-content: space-between;
    margin-top: 18px;
    cursor: pointer;
  }

  .title-text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 24px;
    color: #0070C0;
  }

  .title-board {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 24px;
    color: #0070C0;
    min-height: 50px;
  }

  .time-text {
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .cont-right {
    width: 392px;
    height: 786px;
    background: rgba(243, 243, 243, 0.5);
    padding: 0 20px;
  }

  .title {
    height: 65px;
    line-height: 65px;
    border-bottom: solid #E4E4E4 1px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #000000;
  }

  .check-more {
    width: 118px;
    height: 32px;
    background: #000000;
    border: none;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 32px;
    color: #FFFFFF;
    margin-top: 20px;
    cursor: pointer;
  }

  .arrow-right {
    width: 6px;
    height: 11px;
    margin-left: 12px;
  }

  .board-item {
    /* display: flex; */
    /* justify-content: space-between; */
    margin-top: 18px;
    position: relative;
    border-bottom: 1px solid #E5E5E5;
    padding-bottom: 18px;
    cursor: pointer;
  }

  .board-text {
    position: absolute;
    right: 10px;
    bottom: 24px;
    font-size: 12px;
    font-family: Microsoft YaHei;
    font-weight: 400;
  }

  .train-text {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 26px;
    color: #000000;
    margin: 48px 0 0;
  }

  .train-cont {
    display: flex;
    width: 808px;
    flex-wrap: wrap;
  }

  .train-item {
    width: 374px;
    height: 138px;
    background: #106470;
    margin-top: 24px;
    margin-right: 30px;
    display: flex;
    position: relative;
    cursor: pointer;
  }

  .train-img {
    width: 146px;
    height: 138px;
  }

  .text-detail {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 300;
    line-height: 21px;
    color: #FFFFFF;
    padding: 20px 15px;
  }

  .train-arrow {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 0;
    bottom: 0;
  }
</style>
